@use "../../assets/scss/mixins/base" as mx;

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

$background: #212f45;
$orange: #fdac49;
$yellow: #fcd422;
$white: #fffafa;
$gray: #a3a3a3;

$triangleUp: polygon(50% 0%, 0% 100%, 100% 100%);
$triangleDown: polygon(50% 100%, 0 0, 100% 0);

@mixin _copy {
  position: absolute;
  @include mx.rect(100%, 100%, inherit, inherit);
  top: 0;
  left: 0;
}
@mixin _sharedText {
  color: $white;
  font-family: "Roboto", sans-serif;
  text-align: center;
  padding-left: 2rem;
  padding-right: 2rem;
  margin: 1rem auto;
}
@mixin _sharedBeam {
  position: absolute;
  top: -20%;
  left: 42.5%;
  @include mx.wh(15%, 140%);
  outline: 1px solid $background;
  @include mx.pseudo-ba {
    width: 100%;
    height: 13%;
  }
  &::before {
    clip-path: $triangleUp;
  }
  &::after {
    clip-path: $triangleDown;
    bottom: 0;
  }
}
@mixin _sharedCloudSides {
  //   content: "";
  //   position: absolute;
  width: 85%;
  height: 85%;
  top: 10%;
  left: -50%;
  right: -50%;
  background: inherit;
}
@mixin _sharedDrop {
  position: absolute;
  @include mx.rect(3%, 20%, $white, 1rem);
  top: -20%;
  transform: rotate(22deg);
}

@mixin _sharedSun($size: 50%, $top: 25%, $left: 25%) {
  position: absolute;
  top: $top;
  left: $left;
  @include mx.circle($size, radial-gradient($orange, $yellow));
  animation: spinSun 20s linear infinite;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    @include mx.circle(100%, inherit);
  }

  .beam {
    @include _sharedBeam;
    &:nth-child(even) {
      &::before,
      &::after {
        background-color: $orange;
      }
    }
    &:nth-child(odd) {
      &::before,
      &::after {
        background-color: $yellow;
      }
    }

    @for $i from 2 through 8 {
      &:nth-child(#{$i}) {
        transform: rotate(calc(22.5deg * ($i - 1)));
      }
    }
  }
}

@mixin _sharedCloud($size: 40%, $top: 27.5%, $left: 25%) {
  $cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;
  $cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;
  $cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;

  position: absolute;
  top: $top;
  left: $left;
  @include mx.rect($size, $size, $white, $cloudBorderRadiusMiddle);

  @include mx.pseudo-ba {
    @include _sharedCloudSides;
  }
  &::before {
    border-radius: $cloudBorderRadiusLeft;
    right: unset;
  }
  &::after {
    border-radius: $cloudBorderRadiusRight;
    left: unset;
  }
}

@mixin _sharedRain($width: 140%, $height: 100%, $top: 80%, $left: -30%) {
  position: absolute;
  left: $left;
  top: $top;
  @include mx.wh($width, $height);
  z-index: 1;
  overflow: hidden;
  .drop {
    @include _sharedDrop;
    animation: rainDropFall 4s linear infinite;

    @for $i from 1 through 10 {
      $delay: $i % 4;
      &:nth-child(#{$i}) {
        animation-delay: #{$delay}s;
        left: calc(#{($i - 1) * 10 + "%"} + #{$delay * 10 + "%"});
      }
    }
  }
}

@mixin _sharedBolt($width: 10%, $height: 50%, $inline: 47%, $block: 5%) {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  @include mx.pseudo-ba {
    @include mx.rect($width, $height, $yellow);
    inset-inline: $inline;
    inset-block: $block;
    transform: rotate(20deg);
  }
  &::before {
    bottom: unset;
    right: unset;
    clip-path: $triangleUp;
  }
  &::after {
    top: unset;
    left: unset;
    clip-path: $triangleDown;
  }
}

@mixin _sharedSnowFlake($width: 15%, $height: 20%, $top: -20%) {
  position: absolute;
  width: $width;
  height: $height;
  top: $top;
  animation: snowFlakeFall 4s linear infinite;
  @for $i from 1 through 10 {
    $delay: $i % 4;
    &:nth-child(#{$i}) {
      animation-delay: #{$delay}s;
      left: calc(#{($i - 1) * 10 + "%"} + #{$delay * 8 + "%"});
    }
  }
  &-part {
    position: absolute;
    @include mx.rect(8%, 100%, $white, 10rem);
    top: 0;
    left: 46%;
    @for $i from 1 through 6 {
      &:nth-of-type(#{$i}) {
        transform: rotate(calc(#{($i - 1) * 60 + "deg"}));
      }
    }
    @include mx.pseudo-ba {
      top: 0;
      @include mx.rect(100%, 28%, inherit, inherit);
    }
    &::before {
      left: -100%;
      transform: rotate(-30deg);
    }
    &::after {
      right: -100%;
      transform: rotate(30deg);
    }
  }
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  background: $background;
  width: 100%;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 800px;
  min-height: 100vh;
  margin: 5% auto;
  display: flex;
  flex-direction: column;
  h1 {
    @include _sharedText;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
  }

  .showcase {
    flex-grow: 1;
    margin: 1rem auto;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-auto-rows: 150px;

    @media all and (min-width: 200px) {
      max-width: 200px;
      grid-gap: 10px;
    }
    @media all and (min-width: 400px) {
      max-width: 400px;
      grid-gap: 10px;
    }
    @media all and (min-width: 600px) {
      max-width: 600px;
      grid-gap: 12px;
    }
    @media all and (max-width: 200px) {
      .container {
        display: none;
      }
    }

    .scene {
      position: relative;
    }
    #sunny {
      .sun {
        @include _sharedSun;
      }
    }
    #partially-cloudy {
      .sun {
        @include _sharedSun(42%, 10%, 40%);
      }
      .cloud {
        @include _sharedCloud;
      }
    }
    #rain {
      .sun {
        @include _sharedSun(42%, 10%, 40%);
      }
      .cloud {
        @include _sharedCloud;
        .cloud-copy {
          //   @include _copy;
          z-index: 2;
          @include _sharedCloud(100%, 0, 0);
          background: inherit;
          border-radius: inherit;
        }
        .rain {
          position: absolute;
          left: -20%;
          top: 80%;
          @include mx.wh(140%, 100%);
          z-index: 1;
          overflow: hidden;
          .drop {
            @include _sharedDrop;
            animation: rainDropFall 4s linear infinite;

            @for $i from 1 through 10 {
              $delay: $i % 4;
              &:nth-child(#{$i}) {
                animation-delay: #{$delay}s;
                left: calc(#{($i - 1) * 10 + "%"} + #{$delay * 10 + "%"});
              }
            }
          }
        }
      }
    }
    #thunderstorm {
      .cloud {
        @include _sharedCloud(40%, 12%, 30%);
        animation: cloudColorChange 4s linear infinite;
        .cloud-copy {
          @include _sharedCloud(100%, 0, 0);
          background: inherit;
          border-radius: inherit;
          z-index: 2;
        }
        .rain {
          @include _sharedRain;
          .lightning {
            @include _sharedBolt;
            animation: lightningFlash 2s linear infinite;
          }
        }
      }
    }
    #snow {
      .cloud {
        @include _sharedCloud(40%, 12%, 30%);
        animation: cloudColorChange 4s linear infinite;
        .cloud-copy {
          @include _sharedCloud(100%, 0, 0);
          background: inherit;
          border-radius: inherit;
          z-index: 2;
        }
        .snow {
          position: absolute;
          @include mx.wh(160%, 100%);
          z-index: 1;
          overflow: hidden;
          top: 80%;
          left: -30%;
          .flake {
            @include _sharedSnowFlake;
          }
        }
      }
    }
  }
}

@keyframes spinSun {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes rainDropFall {
  15% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    top: 120%;
    opacity: 0;
  }
}
@keyframes cloudColorChange {
  0%,
  100% {
    background: $white;
  }
  50% {
    background: $gray;
  }
}
@keyframes lightningFlash {
  0%,
  39% {
    opacity: 0;
  }
  40%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
  }
}
@keyframes snowFlakeFall {
  15% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    top: 120%;
    opacity: 0;
  }
}
